<template>
    <div>
        <u-popup :show="show" @close="close" @open="open" mode="bottom">
            <view class="couclass">
                <view class="tabs">
                    <u-tabs
                        :activeStyle="{
                          color: '#333',
                          fontWeight:'500',
                          fontSize: '14px',
                        }"
                        :current="shopCurrent"
                        :inactiveStyle="{
                          color: '#666',
                          fontSize: '14px',
                        }"
                        :list="orderTabs"
                        :scrollable="false"
                        @click="changeTabs"
                        itemStyle="padding-left: 15px; padding-right: 15px; height: 48px;width: 31%;"
                        lineColor="#FB625D"
                        lineWidth="60"
                    ></u-tabs>
                </view>
                <view class="main">
                    <template v-if="list.length">
                        <view class="order-detail" v-for="item in list">
                            <!-- <view @click="pushHome(item)" class="justify-between align-center top">
                                <img :src="item.shopLogo" alt class="shop-pic" />
                                <view class="tag-title">{{item.shopName}}</view>
                                <u-icon color="#000000" name="arrow-right" size="16"></u-icon>
                            </view>-->
                            <view class="content center align-center">
                                <view class="left">
                                    <span>￥</span>
                                    <span>{{item.reduceMoney}}</span>
                                </view>
                                <view class="right">
                                    <view class="align-center justify-between coupon-name">
                                        <view class>{{item.activityName}}</view>
                                        <view @click="useCou(item)" class v-if="shopCurrent == 0">使用</view>
                                        <view @click="takeCoupon(item.shopCouponId)" v-if="shopCurrent == 1">领取</view>
                                        <view  v-if="shopCurrent == 2" style="background: #e1e1e1;">不可使用</view>
                                    </view>
                                    <view class="align-center sub-title">
                                        <view class="left">满减门槛</view>
                                        <view class="right" v-if="item.threshold">
                                            满
                                            <span>￥{{item.fullMoney}}</span>可用
                                        </view>
                                        <view class="right" v-else>无门槛</view>
                                    </view>
                                    <view class="align-center sub-title">
                                        <view class="left">有效期</view>
                                        <view class="right">
                                            <view class>{{item.startTime}}</view>
                                            <view class>{{item.endTime}}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="hide-content" v-if="showContent">
                                <view class="align-start hide-content-item">
                                    <view class>限领数量</view>
                                    <view class>{{item.stockNumber}}</view>
                                </view>
                                <view class="align-start hide-content-item">
                                    <view class>支付方式</view>
                                    <view
                                        class
                                    >{{item.paymentMode == 1 ? '微信支付' : item.paymentMode == 4 ?'线下支付' : '余额支付'}}</view>
                                </view>
                                <view class="align-start hide-content-item">
                                    <view class>使用范围</view>
                                    <view
                                        class
                                    >{{item.applyType == 1 ? '全部商品': item.applyType == 2 ? '指定商品可用' : '指定商品不可用'}}</view>
                                </view>
                            </view>
                            <!-- <view @click="showContent = !showContent" class="bottom align-center justify-center">
                                规则说明
                                <u-icon color="#000000" name="arrow-down" size="16" v-if="!showContent"></u-icon>
                                <u-icon color="#000000" name="arrow-up" size="16" v-if="showContent"></u-icon>
                            </view>-->
                        </view>
                        <view class="load-more" v-if="list.length >= total">已经到底啦~</view>
                    </template>
                    <template v-else>
                        <view class="no-data">
                            <img alt src="/static/icon/shopCar/pic_wushuju@2x.png" />
                            <view class>暂无优惠券~</view>
                        </view>
                    </template>
                </view>
                <view class="bottomwww">
                    <view @click="notUse" class="btn">不使用红包</view>
                </view>
            </view>
        </u-popup>
    </div>
</template>

<script>
import $http from "@/config/requestConfig";

export default {
  props: {
    productIds: {
      type: Array,
      default: () => []
    },
  },
    data() {
        return {
            show: false,
            shopCurrent: null,
            shopId: null,
            state: 0,
            list: [],
            orderTabs: [
                { name: "可用" },
                { name: "可领取" },
                { name: "不可用" },
            ],
        };
    },
    methods: {
        open() {
            this.shopCurrent = 0;
            // this.productIds = productIds;
            console.log(' this.productIds',  this.productIds);
            const shopinfo = uni.getStorageSync("shopInfo");
            this.shopId = shopinfo.shopId;
            this.shopCurrent = 0;
            this.getAll();
            this.show = true;
        },
        close() {
            this.show = false;
        },
        changeTabs(e) {
            console.log(' this.productIds',  this.productIds);
            console.log('changeTabs', e);
            this.shopCurrent = e.index
            if (e.index === 1) {
                this.getShopCu();
            } else {
                this.getAll();
            }
        },
        takeCoupon(id) {
            const params = {
                couponCode: "",
                // "couponId": id,
                shopCouponId: id,
                shopId: this.shopId,
                source: 1,
                useCredit: 0,
            };
            $http.post("coupon/takeCoupon", params).then((res) => {
                console.log(res);
                if (res) {
                    uni.showToast({
                        title: "领取成功",
                    });
                }
            });
        },
        async getAll() {
            const parasm = {
                state: 0,
                isUse:
                    this.shopCurrent === 0 ? 1 : this.shopCurrent === 2 ? 2 : 1,
                shopId: this.shopId,
                productIds: this.productIds,
            };
            console.log(this.shopCurrent);
            console.log(parasm);
            await $http
                .post("coupon/getCouponList", parasm)
                .then((res) => {
                    this.list = res;
                });
        },
        getShopCu() {
            $http
                .get("/coupon/getShopCouponByShopId", {
                    shopId: this.shopId,
                })
                .then((res) => {
                    console.log(res, "resres");
                    this.list = res;
                    console.log(this.list, "123");
                    console.log(this.list.length, "123");
                });
        },
        useCou(item) {
            console.log(item);
            this.$emit("useCou", item);
            this.close();
        },
        notUse() {
            this.$emit("useCou", null);
        },
    },
};
</script>

<style lang="scss" scoped>
.couclass {
    width: 750rpx;
    height: 928rpx;
    background: #ffffff;
    .tabs {
        width: 100%;
        background: #fff;
        box-shadow: 0px 2rpx 6rpx 0px rgba(51, 51, 51, 0.18);
    }
    .main {
        height: 720rpx;
        overflow-y: auto;
    }
    .bottomwww {
        width: 750rpx;
        height: 124rpx;
        background: #ffffff;
        box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.18);
        padding-top: 24rpx;
        .btn {
            width: 700rpx;
            height: 75rpx;
            background: #fa625d;
            border-radius: 38rpx;
            margin: 0 auto;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.order-detail {
    width: 670rpx;
    margin: 35rpx 40rpx 30rpx 40rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.12);
    background: #ffffff;
    padding-bottom: 20rpx;

    .top {
        border-bottom: 1px dotted #eee;
        height: 103rpx;
        line-height: 90rpx;
        margin: 0 20rpx;

        .shop-pic {
            height: 64rpx;
            width: 64rpx;
            border-radius: 50%;
        }

        .tag-title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #333333;
            padding-left: 20rpx;
            flex: 1;
        }

        .status {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-right: 20rpx;
            width: 120rpx;
            height: 42rpx;
            line-height: 42rpx;
            text-align: center;
            background: #f8635d;
            border-radius: 4rpx;
        }
    }

    .center {
        padding: 29rpx 29rpx 29rpx 29rpx;

        .left {
            width: 135rpx;

            span:first-child {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #e86c64;
                line-height: 48rpx;
            }

            span:last-child {
                font-size: 62rpx;
                font-family: SF UI Text;
                font-weight: 600;
                color: #e86c64;
                line-height: 48rpx;
            }
        }

        .right {
            flex: 1;
            .coupon-name {
                view:first-child {
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 48px;
                }

                view:last-child {
                    width: 124rpx;
                    height: 52rpx;
                    background: #fb645d;
                    border-radius: 26rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 52rpx;
                    text-align: center;
                }
            }

            .sub-title {
                .left {
                    font-size: 30rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 48rpx;
                    width: 150rpx;
                }

                .right {
                    font-size: 30rpx;
                    font-family: SF UI Text;
                    font-weight: 400;
                    color: #333333;
                    line-height: 48rpx;

                    span {
                        font-size: 36rpx;
                        font-family: SF UI Text;
                        font-weight: 600;
                        color: #e86c64;
                        line-height: 48rpx;
                    }
                }
            }
        }
    }

    .hide-content {
        padding: 0 26rpx 40rpx;

        .hide-content-item {
            view:first-child {
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 48rpx;
                width: 125rpx;
            }

            view:last-child {
                width: 425rpx;
                padding-left: 15rpx;
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 48rpx;
            }
        }
    }

    .bottom {
        margin-left: 25rpx;
        margin-right: 25rpx;
        height: 49rpx;
        background: #f6f7fb;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 48rpx;
    }
}

.total {
    position: fixed;
    bottom: 0rpx;
    // height: 280rpx;
    width: 100%;
    background: #ffffff;
    z-index: 999;
    box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.18);
    padding-left: 25rpx;

    .order-button {
        height: 110rpx;
        margin-right: 31rpx;

        .left {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #e86c64;
            padding-left: 31rpx;
        }
    }
}

/deep/ .u-number-box__input {
    width: 100rpx !important;
}

.load-more {
    height: 28rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666;
    text-align: center;
}

.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 110rpx;

    img {
        width: 320rpx;
        height: 320rpx;
        margin-bottom: 95rpx;
    }
}
</style>